<template>
    <div class="delivery">
        <div class="loadiv" v-if="isModal">
            <smalloading class="loading"></smalloading>
        </div>
        <div class="pop" v-if="check_num_show">
            <div class="check_num">
                <span>{{product.productName}}</span>
                <div class="margin">
                    <label>实收数量</label>
                    <input type="number" v-model="quantity.acceptQuantity" />
                </div>
                <div class="margin">
                    <label>退货数量</label>
                    <input type="number" v-model="quantity.returnQuantity" />
                </div>
                <div class="margin">
                    <label>换货数量</label>
                    <input type="number" v-model="quantity.changeQuantity" />
                </div>
                <button class="affirm" @click="num_ok()">确认</button>
                <button class="cancel" @click="num_close()">取消</button>

            </div>
            <div class="mask">

            </div>
        </div>
        <div class="nav" v-if="isShow">
            <div class="return">
                <span class="arrow"></span>
                <span class="back" v-on:click="back()">返回</span>
            </div>
            <div class="nav_text">
                <p>客户确认</p>
            </div>
        </div>
        <div class="div" v-if="isShow">
            <div class="body">
                <ul>
                    <li>
                        <span class="left">发货订单号：</span>
                        <span class="right">{{baseInfo.orderId}}</span>
                    </li>
                    <li>
                        <span class="left">收&ensp;货&ensp;人：</span>
                        <span class="right">{{baseInfo.receiverMan}}</span>
                    </li>
                    <li>
                        <span class="left">发货时间：</span>
                        <span class="right">{{baseInfo.deliveryTime | format_date}}</span>
                    </li>
                    <li>
                        <span class="left">电话号码：</span>
                        <span class="right">{{baseInfo.receiverMobile}}</span>
                    </li>
                    <li>
                        <span class="left">状态：</span>
                        <span class="right">{{baseInfo.receiveStatusName}}</span>
                    </li>
                </ul>
            </div>
            <div class="detail">
                <ul v-for="item in productInfo" :key="item.id" @click="check_num(item)">
                    <li>
                        <span class="left">商品编码：</span>
                        <span class="right">{{item.productCode}}</span>
                    </li>
                    <li v-show="item.productName.length < 19">
                        <span class="left">商品名称：</span>
                        <span class="right">{{item.productName | format_str}}</span>
                    </li>
                    <li class="spmc" v-show="item.productName.length >= 19">
                        <span class="left">商品名称：</span>
                        <p class="right_">{{item.productName}}</p>
                    </li>
                    <li>
                        <span class="left">发货数量：</span>
                        <span class="right">{{item.quantity}}</span>
                    </li>
                    <!--  -->
                    <li>
                        <span class="left">实收数量：</span>
                        <span class="right">{{item.acceptQuantity}}</span>
                    </li>
                    <li>
                        <span class="left">退回数量：</span>
                        <span class="right">{{item.returnQuantity}}</span>
                    </li>
                    <li>
                        <span class="left">换货数量：</span>
                        <span class="right">{{item.changeQuantity}}</span>
                    </li>
                </ul>
            </div>
            <i v-if="baseInfo.receiveStatus == 'deliverySent'">
                <div class="signature" v-show="sign_img == null" v-on:click="sign()">
                    <img src='./../../../static/img/6.png'>
                </div>
                <div v-show="sign_img != null" v-on:click="sign()">
                    <img class="signature sign_img" v-bind:src="sign_img" />
                </div>
                <div class="btnContainer ">
                    <button type="submit " class="SubmitBtn " v-on:click="qren_sub()">确认收货</button>
                </div>
            </i>
        </div>
    </div>
</template>
<script>
import smalloading from "./../loading/smalloading";
export default {
  name: "delivery",
  data() {
    return {
      baseInfo: {},
      productInfo: [],
      sign_img: "",
      deliveryId_: "",
      isModal: true,
      isShow: false,
      quantity: {
        acceptQuantity: 0,
        returnQuantity: 0,
        changeQuantity: 0
      },

      check_num_show: false,
      product: {}
    };
  },
  components: {
    smalloading
  },
  methods: {
    back: function() {
      this.$router.push({ path: "/DeliveryScan" });
    },
    load_list: function() {
      //deliveryId : H052610 - H052618 H050054
      this.deliveryId_ = sessionStorage.getItem("qrcode");
      this.$http
        .post("api/motor/qren_query", { deliveryId: this.deliveryId_ })
        .then(
          res => {
            this.isModal = false;
            sessionStorage.removeItem("deliveryId");
            let result = res.data;
            console.log(result, "result______________________________");
            if (result.code == 101) {
              this.isModal = false;
              this.$layer.alert("当前用户已在其他设备登录");
              this.$router.push({ path: "/" });
              localStorage.removeItem("authorization");
              return;
            }
            if (result.responseMessage == "success") {
              this.baseInfo = result.baseInfo;

              //判断缓存里面是否存在 product
              let product_list_QR = sessionStorage.getItem("product_list_QR");
              if (product_list_QR) {
                this.productInfo = JSON.parse(product_list_QR);
              } else {
                this.productInfo = result.productInfo;
              }
              this.isShow = true;
            } else if (result.responseMessage == "fail") {
              let this_ = this;
              let rot = this.$router;
              this_.$layer.alert(result.errorMessage, function() {
                this_.$layer.close(this.id);
                rot.push({ path: "/DeliveryScan" });
              });
              return;
            } else {
              let this_ = this;
              let rot = this.$router;
              this_.$layer.alert("未知错误", function() {
                this_.$layer.close(this.id);
                rot.push({ path: "/DeliveryScan" });
              });
              return;
            }
          },
          err => {
            this.isModal = false;
            this.$layer.alert("未知错误");
            this.$router.push({ path: "/" });
            localStorage.removeItem("authorization");
          }
        );
    },
    sign: function() {
      sessionStorage.setItem("mater", "Client");
      this.$router.push({ path: "/SignedEdition" });
    },
    qren_sub: function() {
      if (!this.sign_img) {
        this.$toast("缺少签字");
        return;
      }
      this.isModal = true;
      //实收数量 acceptQuantity  退货数量 returnQuantity 换货数量 changeQuantity

      //签字确认
      this.$http
        .post("api/motor/qren_sub", {
          deliveryId: this.baseInfo.deliveryId,
          sign_img: this.sign_img,
          productInfo: this.productInfo
        })
        .then(
          res => {
            this.isModal = false;
            let result = res.data;
            if (result.code == 101) {
              this.isModal = false;
              this.$layer.alert("当前用户已在其他设备登录");
              this.$router.push({ path: "/" });
              sessionStorage.removeItem("product_list_QR");
              localStorage.removeItem("authorization");
              return;
            }
            if (result.responseMessage == "success") {
              let this_ = this;
              this_.$layer.alert("客户收货完成", function() {
                this_.$layer.close(this.id);
                sessionStorage.removeItem("product_list_QR");
                this_.load_list();
              });
              return null;
            } else {
              let this_ = this;
              this_.$layer.alert(result.errorMessage, function() {
                this_.$layer.close(this.id);
                sessionStorage.removeItem("product_list_QR");
                this_.$router.push({ path: "/Nav" });
              });
              return;
            }
          },
          err => {
            this.isModal = false;
            this.$layer.alert("未知错误");
            this.$router.push({ path: "/" });
            sessionStorage.removeItem("product_list_QR");
            localStorage.removeItem("authorization");
          }
        );
    },
    check_num: function(res) {
      if (this.baseInfo.receiveStatusName != "已收货") {
        this.check_num_show = true;
      }
      this.product = res;
      this.quantity.acceptQuantity = res.acceptQuantity;
      this.quantity.changeQuantity = res.changeQuantity;
      this.quantity.returnQuantity = res.returnQuantity;
    },
    num_close: function() {
      this.check_num_show = false;
      this.product = {};
    },
    num_ok: function() {
      let _this = this;
      for (let i = 0; i < _this.productInfo.length; i++) {
        let _product = _this.productInfo[i];
        if (_product.deliveryItemSeqId == _this.product.deliveryItemSeqId) {
          //判断 三个值相加是否相等
          let result_quantity = _product.quantity - 0;
          let result_sum =
            _this.quantity.acceptQuantity -
            0 +
            (_this.quantity.changeQuantity - 0) +
            (_this.quantity.returnQuantity - 0);
          let that_ = _this;
          if (result_quantity != result_sum) {
            _this.$layer.alert("当前数量不匹配", function() {
              _this.$layer.close(this.id);
            });
            return;
          }
          _product.acceptQuantity = _this.quantity.acceptQuantity - 0;
          _product.changeQuantity = _this.quantity.changeQuantity - 0;
          _product.returnQuantity = _this.quantity.returnQuantity - 0;
        }
      }
      //将product 缓存
      sessionStorage.setItem(
        "product_list_QR",
        JSON.stringify(_this.productInfo)
      );
      _this.num_close();
    }
  },
  created: function() {
    this.sign_img = sessionStorage.getItem("sign_img");
    sessionStorage.removeItem("sign_img");
    sessionStorage.removeItem("mater");
    this.load_list();
  }
};
</script>


<style lang="css" scoped >
.spmc {
  height: 4rem;
}
.margin {
  margin-top: 1rem;
}

.mask {
  z-index: 4;
  left: 0;
  position: fixed;
  top: 0;
  opacity: 0.4;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
}

.check_num {
  width: 80%;
  background-color: #fff;
  position: fixed;
  z-index: 8;
  margin-left: 10%;
  margin-top: 20%;
  padding: 3% 6% 3% 11%;
  border-radius: 0.5rem;
}

.check_num label {
  font-size: 15px;
}

.check_num input {
  width: 90%;
  font-size: 15px;
  height: 3rem;
  padding-left: 4%;
  margin-top: 5px;
  border: 1px solid #d3dce6;
  border-radius: 6px;
  background: #f9fafc;
}

.check_num span {
  font-size: 15px;
  text-align: -webkit-center;
  display: -webkit-box;
}

.affirm {
  display: inline-block;
  background: #668292;
  width: 30%;
  height: 3.4rem;
  border-radius: 6px;
  border: none;
  color: #fff;
  font-weight: bold;
  padding: 0.5rem 0;
  margin: 17px;
  outline: none;
  font-size: 1.5rem;
}

.cancel {
  display: inline-block;
  background: #fff;
  width: 30%;
  height: 3.4rem;
  border-radius: 6px;
  border: 1px solid #668292;
  color: #668292;
  font-weight: bold;
  padding: 0.5rem 0;
  margin: 17px;
  outline: none;
  font-size: 1.5rem;
}

.loadiv {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 100;
  /* background-color: gray; */
  /* opacity: 0.1; */
}

.loading {
  margin: 60% auto;
  z-index: 22;
}

.div {
  padding-top: 4.1rem;
}

.arrow {
  border: 0.15rem solid #fff;
  border-width: 0.15rem 0 0 0.15rem;
  display: inline-block;
  height: 0.85rem;
  width: 0.85rem;
  -webkit-transform-origin: center center;
  -webkit-transform: rotate(135deg);
  -webkit-transition: all 0.5s ease-in 0.1s;
  transform-origin: center center;
  transform: rotate(-45deg);
  transition: all 0.5s ease-in 0.1s;
}

.return {
  width: 44%;
  padding-left: 1.5rem;
}

.back {
  font-size: 1.3rem;
  color: #fff;
}

.nav {
  width: 100%;
  position: fixed;
  z-index: 33;
  line-height: 4rem;
  display: -webkit-box;
  background: #668292;
  height: 4rem;
}

.nav_text {
  font-size: 1.6rem;
  color: #fff;
}

.title {
  padding-top: 0.7rem;
  height: 3.5rem;
  background: #fff;
  box-shadow: 0px 3px 5px #999;
  text-align: -webkit-center;
}

.btn {
  height: 2rem;
  width: 70%;
  background: #fcfcfc;
  border: 1px solid #dcdada;
  border-radius: 1rem;
  color: #49a1de;
  line-height: 2rem;
  font-size: 1.2rem;
}

.body {
  margin: 1rem 0rem;
  background: #fff;
}

.body ul {
  margin: 0 1rem;
}

.body :last-child {
  border: none;
}

.body li {
  font-size: 1.3rem;
  color: gray;
  height: 3rem;
  line-height: 3rem;
  border-bottom: 1px solid #e5e3e3;
}

.body .right {
  float: right;
}

.btnContainer {
  padding-bottom: 5rem;
  width: 100%;

  text-align: center;

  /* padding: 0.83rem 0; */
  padding-right: 10%;
}

.btnContainer .SubmitBtn {
  display: inline-block;
  background: #668292;
  width: 50%;
  height: 3.4rem;
  border-radius: 6px;
  border: none;
  color: #fff;
  font-weight: bold;
  padding: 0.5rem 0;
  outline: none;
  font-size: 1.5rem;
  margin-top: 10px;
}

.detail {
  margin: 1rem 0;
  background: #fff;
}

.detail ul {
  margin-top: 1rem;
  box-shadow: 0px 0px 15px #999;
}

.mar {
  width: 65%;
}

.detail li {
  font-size: 1.3rem;
  color: gray;
  min-height: 2rem;
  line-height: 2rem;
}

.right_ {
  width: 210px;
  float: right;
  word-break: break-all;
  display: inline-flex !important;
}

.detail .left {
  padding: 0 1rem;
  display: inline-block;
  /* width: 65%; */
}

.detail .right {
  float: right;
  margin-right: 10px;
}

.signature img {
  width: 3.4rem;
  margin-top: 1.3rem;
}

.signature {
  margin: 1rem 3.5rem;
  text-align: center;
  width: 80%;
  height: 6.4rem;
  background: #ffffff;
  border: 1px solid #bebebe;
  border-radius: 8px;
}

.sign_img {
  padding-left: 70px;
}
</style>

